import React from 'react';
import styled from 'styled-components';
import { TouchableOpacity } from 'react-native';

const Tab = ({ title, color, borderWidth, clicked, currentTab }) => {
  return (
    <Container
      onPress={() => {
        currentTab(title);
        clicked();
      }}
      style={{
        borderBottomWidth: borderWidth
      }}>
      <Title style={{ color: color }}>{title}</Title>
    </Container>
  );
};

const Container = styled(TouchableOpacity)`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-color: purple;
`;
const Title = styled.Text`
  font-size: 14;
`;

export default Tab;
